import React, { useState } from 'react';
import { InfoCircleOutlined } from '@ant-design/icons';
import { Tag, Typography, Timeline, Button } from 'antd';
import './VersonInfo.css';

const { Title } = Typography;

const data = [
  {
    version: '0.0.0',
    date: '2023年3月19日',
    content: ['完成前端页面开发', '上线部署'],
  },
  {
    version: '0.1.0',
    date: '2023年3月30日',
    content: ['完成登录注册功能', '增加查看版本信息功能'],
  },
  {
    version: '0.1.5',
    date: '2023年4月2日',
    content: [
      '修复Redis，登录注册失败问题',
      '增加资源分享模块',
      '修改了部分样式问题',
    ],
  },
  {
    version: '0.1.6',
    date: '2023年4月3日',
    content: [
      '增加了上传头像功能',
      '修正了个人信息页面的信息错误问题',
      '增加了bug提交和bug清单功能',
    ],
  },
  {
    version: '0.1.7',
    date: '2023年4月4日',
    content: [
      '优化版本信息的时间轴展示',
      '优化工具模块，删除无开发计划的工具，添加了抽签器工具',
      '修改首页排版，增加轮播图',
    ],
  },
  {
    version: '0.2.0',
    date: '2023年4月4日',
    content: ['阅读管理'],
  },
  {
    version: '0.2.1',
    date: '2023年4月9日',
    content: ['新工具-题库'],
  },
  {
    version: '0.2.2',
    date: '2023年4月9日',
    content: ['阅读管理模块-书籍详情页'],
  },
];

const VersionInfo = () => {
  const [collapsed, setCollapsed] = useState(true);
  const maxItems = 3;

  const displayData = collapsed ? data.slice(-maxItems) : data;

  return (
    <div className='version-info'>
      <Title level={3}>
        版本信息
        <InfoCircleOutlined className='version-info-icon' />
      </Title>
      <Timeline reverse={true}>
        {displayData.map((item, index) => (
          <Timeline.Item
            key={index}
            color={index === data.length - 1 ? 'red' : 'green'}>
            <strong>{item.version}</strong> - {item.date}
            <br />
            {item.content.join('，')}
          </Timeline.Item>
        ))}
      </Timeline>
      <Button onClick={() => setCollapsed(!collapsed)}>
        {collapsed ? '展开' : '折叠'}
      </Button>
    </div>
  );
};
export default VersionInfo;
